<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../resource/dhtmlx/calender/codebase/calendar.css">
    <script src="../../resource/dhtmlx/calender/codebase/calendar.js"></script>
    <script src="../../js/jquery-3.4.1.js"></script>
</head>
<body>
<div>
    <section class="dhx_sample-controls">
        <button class="dhx_sample-btn dhx_sample-btn--flat" calendar-index="1">Get Date</button>
        <input class="dhx_sample-input" id="result_input1" type="text" readonly>
    </section>
    <section class="dhx_sample-container">
        <div class="dhx_sample-container__widget" id="calendar1"></div>
    </section>
</div>
<div>
    <section class="dhx_sample-controls">
        <button class="dhx_sample-btn dhx_sample-btn--flat" calendar-index="2">Get Date</button>
        <input class="dhx_sample-input" id="result_input2" type="text" readonly>
    </section>
    <section class="dhx_sample-container">
        <div class="dhx_sample-container__widget" id="calendar2"></div>
    </section>
</div>
<div>
    <section class="dhx_sample-controls">
        <button class="dhx_sample-btn dhx_sample-btn--flat" calendar-index="3">Get Date</button>
        <input class="dhx_sample-input" id="result_input3" type="text" readonly>
    </section>
    <section class="dhx_sample-container">
        <div class="dhx_sample-container__widget" id="calendar3"></div>
    </section>
</div>
<div>
    <section class="dhx_sample-controls">
        <button class="dhx_sample-btn dhx_sample-btn--flat" calendar-index="4">Get Date</button>
        <input class="dhx_sample-input" id="result_input4" type="text" readonly>
    </section>
    <section class="dhx_sample-container">
        <div class="dhx_sample-container__widget" id="calendar4"></div>
    </section>
</div>
<script>
    var calendarMap = {
        calendar1 : new dhx.Calendar("calendar1", {
            css: "dhx_widget--bordered"
            , mode: "calendar"
        }),
        calendar2 : new dhx.Calendar("calendar2", {
            css: "dhx_widget--bordered"
            , mode: "month"
        }),
        calendar3 : new dhx.Calendar("calendar3", {
            css: "dhx_widget--bordered"
            , mode: "year"
        }),
        // 这种模式不可用
        calendar4 : new dhx.Calendar("calendar4", {
            css: "dhx_widget--bordered"
            , mode: "timepicker"
        })
    };

    $(function () {
        $(".dhx_sample-btn").click(function () {
            $(this).next().val(calendarMap['calendar' + $(this).attr("calendar-index")].getValue());
        });
    })
</script>
</body>
</html>